<template>
  <div class="app">
    <van-sticky>
      <van-nav-bar
        title="咨询记录"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </van-sticky>
    <div id="main">
      <!-- <vxe-table border="inner" size="mini" :data="data.list">
        <vxe-column type="seq" width="15"></vxe-column>
        <vxe-column :field="'userName'" :title="'咨询人'" />
        <vxe-column :field="'date'" :title="'预约日期'" />
        <vxe-column :field="'startTime'" :title="'开始时间'" />
        <vxe-column :field="'endTime'" :title="'结束时间'" />
        <vxe-column :field="'action'" width="60">
          <template #default="{ row }">
            <van-button size="mini" type="primary" @click="handleClick(row)">
              查看
            </van-button>
          </template>
        </vxe-column>
      </vxe-table> -->
      <Table :header="header" :url="url" @toClick="handleClick"></Table>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { getServiceRecord } from '../api'
import Table from '../components/table.vue'

export default defineComponent({
  components: { Table },
  setup() {
    const router = useRouter()

    let data = reactive({
      list: [],
    })
    const onClickLeft = () => {
      router.push({
        name: 'Me',
      })
    }

    const header = {
      name: 'userName',
      nameKey: '咨询人',
      date: 'date',
      dateKey: '预约日期',
      startTime: 'startTime',
      startKey: '发布时间',
      endTime: 'endTime',
      endKey: '预约时间',
    }

    const url = '/api/blade-appointment/advisory/records/list'

    getServiceRecord(1, 100).then((res) => {
      data.list = res.data.data.records
      data.list.map((item: Record<string, any>) => {
        item.date = item.startTime.substring(0, 10)
        item.startTime = item.startTime.substring(11, 16)
        item.endTime = item.endTime.substring(11, 16)
      })
    })

    return {
      onClickLeft,
      data,
      header,
      url,
      handleClick(row: any) {
        let query = {
          id: row.id,
          date: row.date,
          startTime: row.startTime,
          endTime: row.endTime,
          userName: row.userName,
          userId: row.userId,
          appointmentReceiveCode: row.appointmentReceiveCode,
          advisoryReportEntityList: JSON.stringify(
            row.advisoryReportEntityList
          ),
          advisoryFeedbackEntityList: JSON.stringify(
            row.advisoryFeedbackEntityList
          ),
        }
        router.push({
          name: 'ReserveReport',
          query: {
            ...query,
          },
        })
      },
    }
  },
})
</script>

<style lang="less" scoped>
#main {
  padding-bottom: 40px;
}
</style>
